<template>
  <div class="timer-bar">
    <div class="x-layout-timer">
      <div class="times-list">
        <div class="ul-box">
          <div class="t-item" v-for="(item,index) in list" :key="index">
            <span class="time-span">{{item}}</span>
            <span class="dot"></span>
          </div>
        </div>
        <div class="pos-box" >
          <div class="child-pos" :style="posStyle">
          <div class="iframe" :style="frameStyle" @mousedown="onMouseDown"></div>
          <div class="line" v-for="(item, index) in showTimeList" :key="index" :style="{'left': item.offsetLeft+'%','width': item.offsetWidth+'%'}"></div>
          </div>
        </div>
      </div>
      <div class="btn-group">
        <i class="icon-font-play el-icon-video-play" :class="isPlay?'el-icon-video-pause':'el-icon-video-play'" @click="handlePlay"></i>
        <span class="out" @click="handleOut">退出</span>
      </div>
    </div>
  </div>
</template>
<script>
import {parseTime} from "@/utils";

function getDayHours() {
  const arr = [];
  for (let i = 0; i < 24; i++) {
    let t = i > 9 ? `${i}:00` : `0${i}:00`;
    arr.push(t);
  }

  return arr;
}
let mouse = {
    frameDomX: 0,
    frameDomW: 0,
    X:0,
    down: false
}
const nowDay = parseTime(new Date(), "{y}-{m}-{d}");
export default {
  props: {
    day: {
      type: String,
      default: nowDay,
    },
  },
  data() {
    return {
      list: getDayHours(),
      showTimeList: [],
      isPlay: false,
      frameStyle: {},
      posStyle: {}
    };
  },
  mounted() {

  },
  methods: {
    setLine(data, _day) {
      this.showTimeList.length = 0;
      let newArr = [];
      if (data.length > 1) {
        const _date = _day || this.day;
        const _second = 24 * 60 * 60 * 1000;
        const nowStemp = +new Date(this.parseTime(`${_date} 00:00:00`));
        const startTemp = +new Date(data[0].gmtReport);
        const endTemp = +new Date(data[data.length - 1].gmtReport);
        const oWidth = ((endTemp - startTemp) / _second) * 100 || 1
        var obj = {
          duration: endTemp - startTemp,
          offsetWidth: oWidth > 96 ? 96:oWidth,
          offsetLeft: ((startTemp - nowStemp) / _second) * 100,
        };
        newArr.push(obj);
        this.showTimeList = newArr;
      }
    },
    setIframe(data, day) {
      const _date = day || this.day;
      const index = parseInt((data.clocks - +new Date(`${_date} 00:00:00`)) / 1000);
      const n = (index / 86400) * 100;
      this.frameStyle = {
        width: "2px",
        left: `${n}%`,
      };
    },
    handlePlay() {
      this.isPlay = !this.isPlay;
      this.$emit("handlePlay", this.isPlay);
    },
    handleOut() {
      this.isPlay = false;
      this.$emit("handleOut");
    },
    setPlayStatus(status) {
      this.isPlay = status;
    },
    onMouseDown(e) {
      this.isPlay = false;
      const frameDom = document.querySelector(".ul-box").getBoundingClientRect();
      mouse.frameDomL = frameDom.x;
      mouse.frameDomW = frameDom.width;
      mouse.down = true;
      this.$emit("dragStart");
      window.addEventListener("mousemove", this.mouseMove);
      window.addEventListener("mouseup", this.mouseUp);
    },
    mouseMove(e) {
      if (mouse.down) {
        const x = e.x - mouse.frameDomL;
        const n = (x / mouse.frameDomW) * 100;
        if (n < 0.1 || n > 96) return;
        mouse.n = n;
        this.frameStyle = {
          width: ".2rem",
          left: x + "px",
          cursor: "grabbing",
        };
      }
    },
    mouseUp() {
      mouse.down = false;
      this.frameStyle.cursor = "";
      this.frameStyle.width = "2px";
      const d = (mouse.n / 100) * (24 * 60 * 60 * 1000) + (+new Date(`${this.day} 00:00:00`));
      this.$emit("dragEnd", parseInt(d));
      window.removeEventListener("mousemove", this.mouseMove);
      window.removeEventListener("mouseup", this.mouseUp);
    },
  },
};
</script>
<style lang="scss" scoped>
.timer-bar {
  position: absolute;
  background: #fff;
  left: 20px;
  bottom: 30px;
  right: 20px;
  height: 60px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  .x-layout-timer {
    width: 100%;
    height: 100%;
    // background: red;
    display: flex;
    padding-left: 20px;
    .times-list {
      max-width: 1400px;
      flex: 1;
      // background: yellow;
      height: 100%;
      position: relative;
      // margin-right: 40px;
      .pos-box {
        width: 100%;
        position: absolute;
        height: 100%;
        top: 0;
        .child-pos {
          position: relative;
          width: 100%;
          height: 100%;
        }
      }
      .iframe {
        position: absolute;
        left: 0;
        height: 60%;
        background: rgb(243, 138, 18);
        width: 2px;
        top: 20%;
        z-index: 9;
        cursor: grabbing;
      }
      .line {
        position: absolute;
        width: 50%;
        height: 2px;
        background: rgba(34, 135, 255, 1);
        top: 50%;
        z-index: 8;
      }
      .ul-box {
        display: flex;
        align-items: center;
        height: 100%;
        // background: blue;
        user-select: none;
        .t-item {
          flex: 1;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            width: 100%;
            border-bottom: 1px dashed rgba(219, 219, 219, 1);
            left: 0;
            top: 50%;
          }
          &:last-child {
            &::after {
              border: none;
            }
          }
          .time-span {
            font-size: 14px;
            position: absolute;
            top: -15px;
            left: -15px;
            color: rgba(51, 51, 51, 1);
          }
          .dot {
            width: 8px;
            height: 8px;
            display: inline-block;
            border: 1px solid rgba(219, 219, 219, 1);
            border-radius: 50%;
            background: #fff;
            position: relative;
            z-index: 9;
          }
        }
      }
    }
    .btn-group {
      width: 100px;
      display: flex;
      align-items: center;
      .icon-font-play {
        font-size: 24px;
        margin-right: 15px;
      }
      .out {
        cursor: pointer;
      }
    }
  }
}
</style>
